<!DOCTYPE html PUBLIC "-//W3C//Ddiv XHTML 1.0 Sdivict//EN" "http://www.w3.org/div/xhtml1/Ddiv/xhtml1-sdivict.ddiv">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>TUGAS BESAR PROGIN 1</title>
        <link id="CSS" href="Main.css" type="text/css" rel="stylesheet" media="screen"/>
        <script type="text/javascript" src="assets/preview.js"></script>
        <script type="text/javascript" src="assets/like.js"></script>
    </head>
    
    <body>
        <div id="bagian_luar">
            <div id="luar">
                <div id="kepala">
                    <div id="logo"><a href="Main.html"><img src="images/logo.jpg" width="450" height="150" alt="dafuq"></img></a></div>
                </div>
                <div id="cari"></div>
                <div id="list_menu">
                    <ul>
                        <li><a href="Main.html">HOME</a></li>
                        <li><a href="Content.html">Content</a></li>
                        <li><a href="Post.html">Post</a></li>
                        <li><a onclick="changeCSS()">Change Theme</a></li>
                        <li><a href="Daftar.html">Sign up</a></li>
                    </ul>
                </div>
                <div id="header_gambar">
                    <img src="images/header.jpg" width="800" height="200" alt="dafuq"></img>
                </div>
                <div class="top_content">
                    <img src="images/orn_top.jpg" alt="dafuq"></img><br />
                </div>
                <div class="hidden_preview" id="konten">
                    <div id="content_1" class="content padding_inbody">
                        <div class="content_data">
                            <div class="content_header">
                                <div><h2><a id ="preview_title" href="link.html">Type Link</a></h2></div>
                            </div>
                            <div class="content_body">
                                <div class="content_caption">
                                    <p id="preview_description"></p>
                                </div>
                                <div class="content_entry content_type_link">
                                    <p id="preview_content_link"></p>
                                </div>
                                <div class="content_entry content_type_image">
                                    <img id="preview_content_img" src="" alt="gambar" width="300" height="150"></img>
                                </div>
                                <div class="content_entry content_type_video">
                                    <object id="preview_content_video" type="application/x-shockwave-flash" style="width:300px; height:200px;" data="http://www.youtube.com/v/7_6B6vwE83U">
                                        <param name="movie" value="http://www.youtube.com/v/7_6B6vwE83U" /></object>
                                </div>
                            </div>
                            <div class="content_signature">
                                <div>
                                    <h3 id="preview_date" class="content_date"></h3>
                                    <p class="content_poster">posted by dafuq</p>
                                    <p>-----------------------</p>
                                    <label class="vote no_vote" id="like_vote1">0</label>
                                </div>
                                <div id="button1">
                                    <img src="images/like.jpg" class="like_button" onclick="doLike(1)"></img>
                                    <img src="images/minus.jpg" alt="minus" width="30" height="50"></img>
                                    <img src="images/dislike.jpg" class="unlike_button" onclick="doUnlike(1)"></img>
                                </div>
                            </div>
                        </div>
                        <input type="button" onclick="hide_preview()" value="ok"></input>
                    </div>
                </div>            
                
                <div id="posting">
                    <br />
                    <form method="post" action="" name="daform">
                    <div>
                        <div class="padding_inbody">
                            <div class="label">Title</div>
                            <div class="separator">:</div>
                            <div class="input_text">
                                <label for="title">
                                    <input name="title" type="text" class="field-teks" id="title" size="50" maxlength="15" ></input>
                                </label>
                            </div>
                        </div>
                        <div class="padding_inbody">
                            <div class="label">Type File</div>
                            <div class="separator">:</div>
                            <div class="input_text">
                                <label for="typelink"><input id="typelink" name="type" type="radio" value="link" onclick="useLink()"></input>Link</label>
                                <label for="typeimage"><input id="typeimage" name="type" type="radio" value="image" onclick="useImage()"></input>Image</label>
                                <label for="typevideo"><input id="typevideo" name="type" type="radio" value="video" onclick="useVideo()"></input>Video</label>   
                            </div>
                        </div>
                        <div class="padding_inbody">
                            <div class="label">Post Link</div>
                            <div class="separator">:</div>
                            <div class="input_text">
                                <label for="link">
                                    <input disabled="" name="link" type="text" class="field-teks" id="link" size="50" maxlength="30" ></input>
                                </label>
                            </div>
                        </div>
                        <div class="padding_inbody">
                            <div class="label">Deskripsi Link</div>
                            <div class="separator">:</div>
                            <div class="input_text">
                                <label for="deskripsi_link">
                                    <textarea disabled="" name="deskripsi_link" class="field-teks" cols="40" rows="3" id="deskripsi_link"></textarea>   
                                </label>
                            </div>
                        </div>
                        <div class="padding_inbody">
                            <div class="label">Post Image</div>
                            <div class="separator">:</div>
                            <div class="input_text">
                                <label>
                                    <input disabled="" id="image" type="file" accept="images/jpeg"></input>
                                </label>
                            </div>
                        </div>
                        <div class="padding_inbody">
                            <div class="label">Post Link Video</div>
                            <div class="separator">:</div>
                            <div class="input_text">
                                <label for="video">
                                    <input name="video" disabled="" type="text" class="field-teks" id="video" size="50" maxlength="30" ></input>
                                </label>
                            </div>
                        </div>
                        <div>
                            <div class="padding_inbody">
                                <label>
                                    <input name="tombol" type="button" value="post" 
                                           onclick="preview(document.getElementById('title'),
                                                document.getElementById('link'),
                                                getCheckedValue(document.daform.elements['type']),
                                                document.getElementById('deskripsi_link'),
                                                document.getElementById('image'),
                                                document.getElementById('video'))"></input>
                                </label>
                            </div>
                        </div>
                    </div>
                    </form>     
                </div>
                <div class="top_content">
                    <img src="images/orn_bottom.jpg" alt="dafuq"></img><br />
                </div>
                <div id="footer">
                    Copyright dafuq <br /><br />
                </div>
            </div>
                
        </div>
    </body>
</html>